<template>
  <div class="frontend-layout">
    <div class="tab-bar">
      <div
        v-for="tab in tabs"
        :key="tab.name"
        :class="['tab-item', { active: $route.path.endsWith(tab.route) }]"
        @click="goTab(tab.route)"
      >
        <i :class="tab.icon"></i>
        <span>{{ tab.label }}</span>
      </div>
      <div class="tab-item back-btn" @click="goBackManager">
        <i class="el-icon-back"></i>
        <span>返回后台管理</span>
      </div>
    </div>
    <div class="tab-content">
      <router-view />
    </div>
    <div class="tech-bg"></div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const tabs = [
  { name: 'community', label: '智慧社区管理', route: 'community', icon: 'el-icon-office-building' },
  { name: 'safety', label: '安全隐患上报', route: 'safety', icon: 'el-icon-warning' },
  { name: 'resident', label: '住户人员添加', route: 'resident', icon: 'el-icon-user' }
];
function goTab(route) {
  router.push(`/frontend/${route}`);
}
function goBackManager() {
  router.push('/backManager');
}
</script>

<style scoped>
.frontend-layout {
  min-height: 100vh;
  background: linear-gradient(135deg, #23243a 0%, #3a3d5c 100%);
  position: relative;
  overflow: hidden;
}
.tab-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(30,40,80,0.95);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  padding: 0 0 0 0;
  position: relative;
  z-index: 10;
}
.tab-item {
  color: #b0b8d0;
  font-size: 18px;
  font-weight: 600;
  padding: 18px 48px 14px 48px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid transparent;
  letter-spacing: 1px;
}
.tab-item.active {
  color: #fff;
  border-bottom: 3px solid #38bdf8;
  background: linear-gradient(90deg,rgba(56,189,248,0.12),rgba(118,75,162,0.12));
  box-shadow: 0 2px 16px rgba(56,189,248,0.08);
}
.tab-item:hover {
  color: #38bdf8;
  background: linear-gradient(90deg,rgba(56,189,248,0.08),rgba(118,75,162,0.08));
}
.tab-item i {
  font-size: 22px;
  transition: color 0.2s;
}
.tab-item.back-btn {
  margin-left: auto;
  background: none;
  color: #b0b8d0;
  border-bottom: none;
  font-size: 17px;
  padding: 12px 32px 12px 32px;
  border-radius: 0 0 0 0;
}
.tab-item.back-btn:hover {
  color: #38bdf8;
  background: linear-gradient(90deg,rgba(56,189,248,0.08),rgba(118,75,162,0.08));
}
.tab-content {
  padding: 32px 0 0 0;
  min-height: 80vh;
  position: relative;
  z-index: 2;
}
.tech-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(135deg,rgba(56,189,248,0.04) 0 2px,transparent 2px 40px),
    repeating-linear-gradient(45deg,rgba(118,75,162,0.04) 0 2px,transparent 2px 40px);
  opacity: 0.8;
  animation: bgmove 30s linear infinite;
}
@keyframes bgmove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 200px 200px, -200px -200px; }
}
</style> 